<template>
  <common-card title="今日订单" :value="numberFormat(orderToday)" >
    <template #default>
        <div ref="lineChartRef" style="width:100%;height:100%"></div>
    </template>
    <template #footer>
        <div>昨日订单量<span class="emphasis">{{moneyFormat(orderLastDay)}}</span></div>
    </template>
  </common-card>
</template>

<script lang="ts">
import {useReportDataStore} from '@/stores/reportData'
import CommonCard from "./CommonCard.vue";
import useFormat from "@/hooks/useFormat"
import { computed } from '@vue/runtime-core';
const {numberFormat,moneyFormat} = useFormat()
import {ref,onMounted,watch} from 'vue'
import * as echarts from 'echarts'
import type {EChartsType} from 'echarts'
export default {
    name:'TodayOrders',
    components:{CommonCard}
}
</script>
<script lang="ts" setup>
const reportDataStore = useReportDataStore()
const lineChartRef = ref()
let lineChart:EChartsType
// orderTrend:Array[14]
// orderTrendAxis:Array[14]
// orderLastDay:2100000
// orderToday:2562061
const orderToday = computed(()=> reportDataStore.reportData.orderToday)
const orderLastDay = computed(()=> reportDataStore.reportData.orderLastDay)
const orderTrend = computed(()=>reportDataStore.reportData.orderTrend)
const orderTrendAxis = computed(()=> reportDataStore.reportData.orderTrendAxis)
const getOption=()=>{
  return{
    grid:{
      left:0,right:0,top:0,bottom:0
    },
    xAxis:{
      boundaryGap:false,
      data:orderTrendAxis.value // x轴数据列表
    },
    yAxis:{
      show: false // 垂直那些线也不要
    },
    series:[
      {
        name:'实时订单数',
        type:'line',
        data:orderTrend.value,
        // 平滑的曲线
        smooth:true,
        // 设置拐点样式
        itemStyle:{
          opacity:0
        },
        // 填充色
        areaStyle: {
          color: 'purple'
        },
        lineStyle: {
          opacity: 0
        }
      }
    ],
       // 显示提示
    tooltip: {
      trigger: 'axis',
      confine: true
    }
  }
}
onMounted(() => {
  // ref格式的数据，在setup中使用的时候，一定要通过.value的方式来使用
  lineChart = echarts.init(lineChartRef.value);
  // console.log('today',orderTrendAxis)

  // 实现响应式效果
  window.addEventListener('resize',()=>{
    lineChart&&lineChart.resize()
  })
})
watch(orderToday,()=>{
  lineChart.setOption(getOption())
})
</script>


<style lang = 'scss' scoped>

</style>